<!--用在上传文件，使用的是照片墙，可以上传多个照片、删除已有照片，并且报错在后端的组件-->

<script>

export default {
  name: "UpIoad",
  data(){
    return{
       fileList:[],
      //记录选择的文件的地址
      dialogImageUrl: '',
      //点击已上传的文件，进行放大显示
      dialogVisible: false,
      //判断文件是否有
      disabled: false,
    }
  },
    props:['pictureUrl'],
  methods:{
    //在这里获得用户添加的文件，当用户选择上传文件后执行的函数。
    saveFile(file, fileList){
      //获得数据流列表
      this.fileList=fileList;
      //把最新的文件列表向父窗口传递，用作父窗口保存文件的数据。
       this.$emit('fileList',this.fileList)
    },
    //移除图像时的回调函数
    handleRemove(file) {
      let index=this.fileList.findIndex(item => item.uid === file.uid);
      if (index !==-1){
        this.fileList.splice(index,1);
        this.$emit('fileList',this.fileList)
      }
    },
    //点击文件列表中已上传的文件时，弹窗，显示图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //点击下载文件时的函数
    handleDownload(file) {
      console.log(file);
    },
  },
  watch:{
    pictureUrl(){
      this.fileList=this.pictureUrl
    }
  }
}
</script>

<template>
  <div class="UploadS">
    <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :on-change="saveFile"
        :file-list="fileList">
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
        <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
      </div>
    </el-upload>


    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>
</template>

<style scoped>

</style>